<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>键盘</title>
		<link rel="stylesheet" href="./css/index.css" />
		<script>
			(function(doc, win) {
				var docEl = doc.documentElement,
					resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
					recalc = function() {
						var clientWidth = docEl.clientWidth;
						if (!clientWidth) return;
						docEl.style.fontSize = 50 * (clientWidth / 375) + 'px';
					};

				if (!doc.addEventListener) return;
				win.addEventListener(resizeEvt, recalc, false);
				doc.addEventListener('DOMContentLoaded', recalc, false);
			})(document, window);
		</script>
	</head>
	<body>
		<div class="wrapper">
			<!-- <div class="input_content">这是点是要输入的文字区域</div> -->
			<input type="password" class="input_content" placeholder="请输入密码" readonly="readonly" value="" />
			<div class="keyboard_ctn">
				<h3>© 版权所有<span class="toggle-btn"></span></h3>
				<ul class="keyboard_bd">

				</ul>
			</div>
		</div>
		<script src="./js/zepto.min.js"></script>
		<script src="./js/touch.js"></script>
		<script src="./js/fx.js"></script>
		<script>
			$(function() {

				$('.input_content').focus(function() {
					$('.keyboard_ctn').animate({
						bottom: "0px"
					}, 300, "ease-in");
					/* document.activeElement.blur(); */
				})

				var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", "0", ""]

				var str = '';
				$.each(arr, function(index, item) {
					//console.log(index, item)
					if (index % 3 == 1 || index % 3 == 2) {
						str += "<li class='border-left border-l-1px'>" + item + "</li>"
					} else {
						str += "<li>" + item + "</li>"
					}

				})
				//$(".keyboard_bd").find("li").eq(11).addClass("iconfont icon-delete");

				//console.log(str);
				$(".keyboard_bd").append(str)

				$(".keyboard_bd").find("li").eq(9).css({
					"line-height": 1.4
				})

				//点击三角形
				$('.toggle-btn').on("tap", function() {
					$('.keyboard_ctn').animate({
						bottom: -$(".keyboard_ctn").height() + "px"
					})
				})

				//回填操作
				var $aLi = $('.keyboard_bd').find('li:not(:last-of-type)');
				var $inputValue = '';
				var inputStr = '';
				var html = '',
					len;
				$aLi.click(function() {
					//console.log($(this).text());

					inputStr += $(this).text();

					$('.input_content').val(inputStr);

					try {
						if(matchStr(inputStr).length > 1){
							alert("不能出现两个小数点,请重新输入")
						}
					} catch (e) {
						//TODO handle the exception
					}

				})

				function matchStr(s) {
					var r, re; // 声明变量。
					re = /\./g; // 创建正则表达式模式。
					r = s.match(re); // 尝试去匹配搜索字符串。
					return (r); // 返回的数组包含了所有 "ain"
					// 出现的四个匹配。
				}

				//删除操作
				var $delLi = $('.keyboard_bd').find('li:last-of-type');

				$delLi.click(function() {
					html = $('.input_content').val();
					len = html.length;
					console.log(html, '---------')
					$('.input_content').val(html.substr(0, len - 1));
					inputStr = html.substr(0, len - 1);
				})

				//手指按下阴影效果
				$('.keyboard_bd li').on('touchstart', function(event) {
					event.stopPropagation();
					$(this).addClass('clicked');
				})
				//手指松开阴影效果
				$('.keyboard_bd li').on('touchend', function(event) {
					event.stopPropagation();
					$(this).removeClass('clicked');
				})
			})
		</script>
	</body>
</html>
